<template>
  <div class="content" :style="{ height: boxHeight + 'px' }">
    <div class="colums">
      <picker
        v-if="type === 'Date' || type === 'DateTime'"
        :column="yearList"
        :boxHeight="boxHeight"
        :itemHeight="itemHeight"
        :defaultIndex="dIndex1"
        :rowNumber="getRowNumber"
        @change="change1"
        :showWorld="staticProp.yearLable"
      />
      <picker
        v-if="type === 'Date' || type === 'DateTime'"
        :column="montList"
        :boxHeight="boxHeight"
        :itemHeight="itemHeight"
        :defaultIndex="dIndex2"
        :rowNumber="getRowNumber"
        @change="change2"
        :showWorld="staticProp.montLable"
      />
      <picker
        v-if="type === 'Date' || type === 'DateTime'"
        :column="dayList"
        :boxHeight="boxHeight"
        :itemHeight="itemHeight"
        :defaultIndex="dIndex3"
        :rowNumber="getRowNumber"
        :showWorld="staticProp.dayLable"
        @change="change3"
      />
      <picker
        v-if="type === 'Time' || type === 'DateTime'"
        :column="hourList"
        :boxHeight="boxHeight"
        :itemHeight="itemHeight"
        :defaultIndex="dIndex4"
        :rowNumber="getRowNumber"
        :showWorld="staticProp.hourLable"
        @change="change4"
      />
      <picker
        v-if="type === 'Time' || type === 'DateTime'"
        :column="mintList"
        :boxHeight="boxHeight"
        :itemHeight="itemHeight"
        :defaultIndex="dIndex5"
        :rowNumber="getRowNumber"
        :showWorld="staticProp.minuteLable"
        @change="change5"
      />
      <picker
        v-if="type === 'Time' || type === 'DateTime'"
        :column="sendList"
        :boxHeight="boxHeight"
        :itemHeight="itemHeight"
        :defaultIndex="dIndex6"
        :rowNumber="getRowNumber"
        :showWorld="staticProp.secondLable"
        @change="change6"
      />
    </div>
    <div class="mask" :style="maskStyle"></div>
    <div class="hairline"></div>
  </div>
</template>
<script>
import picker from "@/components/picker";
export default {
  name: "DateTimePicker",
  props: {
    itemHeight: {
      type: [Number, String],
      default: 44,
    },
    defaultIndex: {
      type: [Number, Array],
      default: 0,
    },
    rowNumber: {
      type: Number,
      default: 5,
    },
    staticProp: {
      type: Object,
      default: {},
    },
    type: {
      type: String,
      default: "",
    },
    value: {
      type: String,
      default: "",
    },
  },
  components: {
    picker,
  },
  data() {
    return {
      yearList: [],
      montList: [],
      dayList: [],
      hourList: [],
      mintList: [],
      sendList: [],
      dIndex1: 0,
      dIndex2: 0,
      dIndex3: 0,
      dIndex4: 0,
      dIndex5: 0,
      dIndex6: 0,
      year: "1970",
      mount: "1",
      day: "1",
      hour: "00",
      mint: "01",
      send: "01",
    };
  },
  computed: {
    boxHeight() {
      let itemHeight = parseInt(this.itemHeight);
      itemHeight = itemHeight ? itemHeight : 44;
      return itemHeight * this.getRowNumber;
    },
    getRowNumber() {
      if (this.rowNumber < 3) {
        return 3;
      }
      return this.rowNumber % 2 === 0 ? this.rowNumber + 1 : this.rowNumber;
    },
    maskStyle() {
      let style = { backgroundSize: "100% 88px" };
      if (this.getRowNumber === 3) {
        style = { backgroundSize: "100% 44px" };
      }
      return style;
    },
  },

  methods: {
    changeDaysList(res) {
      if (["1", "3", "5", "7", "8", "10", "12"].includes(res)) {
        this.dayList = [];
        for (let i = 1; i <= 31; i++) {
          this.dayList.push(`${i}`);
        }
      } else if (["4", "6", "9", "11"].includes(res)) {
        this.dayList = [];
        for (let i = 1; i <= 30; i++) {
          this.dayList.push(`${i}`);
        }
      } else {
        this.dayList = [];
        if (
          (Number(this.year) % 4 == 0 && Number(this.year) % 100 != 0) ||
          Number(this.year) % 400 == 0
        ) {
          for (let i = 1; i <= 29; i++) {
            this.dayList.push(`${i}`);
          }
        } else {
          for (let i = 1; i <= 28; i++) {
            this.dayList.push(`${i}`);
          }
        }
      }
    },
    change(index, res) {
      let date = "";
      if (this.type === "Time") {
        date = `${this.hour}:${this.mint}:${this.send}`;
      } else if (this.type === "Date") {
        date = `${this.year}-${this.mount}-${this.day}`;
      } else {
        date = `${this.year}-${this.mount}-${this.day} ${this.hour}:${this.mint}:${this.send}`;
      }
      console.log(date);
      this.$emit("change", date);
    },
    change1(res) {
      this.year = res;
      this.changeDaysList(this.mount);
      this.change();
    },
    change2(res) {
      this.mount = res;
      this.changeDaysList(this.mount);
      this.change();
    },
    change3(res) {
      this.day = res;
      this.change();
    },
    change4(res) {
      this.hour = res;
      this.change();
    },
    change5(res) {
      console.log(res);
      this.mint = res;
      this.change();
    },
    change6(res) {
      this.send = res;
      this.change();
    },
    init() {
      let updatValue = this.value;
      let TimeArr = [];
      if (this.type === "Time") {
        TimeArr = updatValue.split(":");
        TimeArr.unshift(0);
        TimeArr.unshift(0);
        TimeArr.unshift(0);
      } else {
        let date = new Date(updatValue);
        TimeArr.push(`${date.getFullYear()}`);
        TimeArr.push(`${date.getMonth() + 1}`);
        TimeArr.push(`${date.getDate()}`);
        TimeArr.push(`${date.getHours()}`);
        TimeArr.push(`${date.getMinutes()}`);
        TimeArr.push(`${date.getSeconds()}`);
      }
      console.log(TimeArr);
      for (let i = 1970; i <= 2100; i++) {
        this.yearList.push(`${i}`);
      }
      this.dIndex1 = this.yearList.findIndex((item) => item === TimeArr[0]);
      for (let i = 1; i <= 12; i++) {
        this.montList.push(`${i}`);
        if (i === Number(TimeArr[1])) {
          this.dIndex2 = i - 1;
        }
      }
      for (let i = 1; i <= 31; i++) {
        this.dayList.push(`${i}`);
        if (i === Number(TimeArr[2])) {
          this.dIndex3 = i - 1;
        }
      }
      for (let i = 0; i <= 23; i++) {
        if (i < 10) {
          this.hourList.push(`0${i}`);
        } else {
          this.hourList.push(`${i}`);
        }
        if (i == Number(TimeArr[3])) {
          this.dIndex4 = i;
        }
      }
      for (let i = 0; i <= 59; i++) {
        if (i < 10) {
          this.mintList.push(`0${i}`);
          this.sendList.push(`0${i}`);
        } else {
          this.mintList.push(`${i}`);
          this.sendList.push(`${i}`);
        }
        if (i == Number(TimeArr[4])) {
          this.dIndex5 = i;
        }
        if (i == Number(TimeArr[5])) {
          this.dIndex6 = i;
        }
      }
    },
  },
  created() {
    this.init();
  },
  mounted() {},
  watch: {
    value(newValue) {
      this.init();
    },
  },
};
</script>
<style lang="less" scoped>
.pickerbox {
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  overflow: hidden;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.toup-enter-active,
.toup-leave-active {
  transition: transform 0.3s;
}
.toup-enter,
.toup-leave-to {
  transform: translate3d(0, 100px, 0);
}
// ----
.vue-picker {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  user-select: none;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  display: block;
}
.content {
  overflow: hidden;
  height: 220px;
  position: relative;
  display: flex;
}
.colums {
  display: flex;
  overflow: hidden;
  font-size: 16px;
  text-align: center;
  flex: 1;
}
.mask {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
      180deg,
      hsla(0, 0%, 100%, 0.9),
      hsla(0, 0%, 100%, 0.4)
    ),
    linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));
  background-repeat: no-repeat;
  background-position: top, bottom;
  backface-visibility: hidden;
  pointer-events: none;
  background-size: 100% 88px;
}
.hairline {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 3;
  width: 100%;
  transform: translateY(-50%);
  pointer-events: none;
  height: 44px;
  &::after {
    position: absolute;
    box-sizing: border-box;
    content: " ";
    pointer-events: none;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    border: 0 solid #ebedf0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    border-width: 1px 0;
  }
}
</style>